// 引入了vue和vue-router
import Vue from "vue";
import VueRouter from "vue-router";
// 引入了一个组件
// import MyMovies from "../views/MyMovies.vue";
// import MyVideo from "../views/MyVideo.vue";
// import MyMine from "../views/MyMine.vue";

// 使用插件
Vue.use(VueRouter);

// 生成了一个路由表
const routes = [
  // 重定向
  {
    path: "/",
    redirect: "/home",
  },
  {
    path: "/home",
    component: () => import("../views/MyMovies.vue"),
    // children表示下一级的子路由
    children: [
      {
        path: "/home",
        redirect: "/home/hot",
      },
      {
        path: "/home/hot",
        component: () => import("../components/HomeHot.vue"),
      },
      {
        path: "/home/wait",
        component: () => import("../components/HomeWait.vue"),
      },
      {
        path: "/home/classic",
        component: () => import("../components/HomeClassic.vue"),
      },
    ],
  },
  {
    path: "/video",
    // 别名
    alias: "/abc",
    // 组件的按需引入, 性能问题, 首页的打开速度
    component: () => import("../views/MyVideo.vue"),
  },
  {
    path: "/mine",
    component: () => import("../views/MyMine.vue"),
  },
  {
    path: "/mini",
    // 加s
    components: {
      oumei: () => import("../views/MyMini1.vue"),
      rihan: () => import("../views/MyMini2.vue"),
    },
  },
  {
    path: "/detail/:id",
    name: "detail",
    props: true,
    component: () => import("../views/MyDetail.vue"),
  },
  // 404路由, * 表示全部匹配
  // 写在整个路由表的最下面
  // vue的路由默认是排他性路由,react的路由默认包容性路由
  {
    path: "*",
    component: () => import("../views/NotFound.vue"),
  },
];

// 生成了一个路由实例
const router = new VueRouter({
  routes,
});

export default router;
